<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/mock-min.js"></script>
    <script src="../js/mock.js"></script>
    <style>
       table{
        margin: auto;
        width: 700px;
       }
       div{
        width: 700px;
        height: 30px;
        margin: auto;
       }
       div button{
        float: right;
       }
       div input{
        float: left;
       }
    </style>
</head>
<body>
    <div>
        <input type="text" id="inp">
        <button onclick="goadd()">添加</button>
        <button onclick="select()">查询</button>
    </div>
        <table border="1px" align="center">
        <tr>
            <td><input type="checkbox" name="" id="inpt" onclick="fun()"><br><button onclick="delall()">删除</button></td>
            <td>茶叶照片</td>
            <td>茶叶名字</td>
            <td>茶叶类别</td>
            <td>茶叶价格</td>
            <td>操作</td>
        </tr>
    </table> 
    <script>
          class Rooms{
            constructor(id,name,price,lei,img) {
                this.id=id
                this.name=name
                this.price=price
                this.lei=lei
                this.img=img
            }
        }
        function upd(allid){
            var allroom=JSON.parse(localStorage.NewRoom)
            for (const iterator of allroom) {
                var room=iterator
                if(room.id==allid){
                    localStorage.NewupdRoom=JSON.stringify(room)
                    location.href='./updateroom.html'
                }
            }
        }
        function del(roomid){
            $.ajax({
                type:'post',
                url:'/js/roomdelete',
                data:JSON.stringify(roomid),
                success:function(data){
                }
            })
        }
        function select(){
            var inpvalue=document.getElementById('inp').value
            localStorage.selectId=inpvalue
            location.href='./showselect.html'
        }
        function goadd(){
            location.href='./addroom.html'
        }


        $.ajax({
                type:'get',
                url:'/js/selectAll',
                success:function(){
                }
            })
       

        var inputlist=document.getElementsByClassName('mycheckbox')
        //1.获取div里面的input标签对象
        var inpobj=document.getElementById("inpt");
        function fun(){
            //点击全选按钮的checkbox  改变所有的checkbox
            for(var i=0;i<inputlist.length;i++){
                inputlist[i].checked=inpobj.checked;
            }
        }



        //给每一个checkbox 添加改变事件
        for(var i=0;i<inputlist.length;i++){
            inputlist[i].onchange=function(){
                console.log(i);
                var cont=0;
            //查询chebox的状态如果为全部选中，更改全选框的状态  如果其中一个没有被选中，那么全选框就不能选中
            for(var i=0;i<inputlist.length;i++){
                if(inputlist[i].checked==true){
                    //累加器
                    cont++;
                }
            }
            //在循环外面判断cont的值  如果cont的值跟inputlist的长度一致。表示全部选中
            if(cont==inputlist.length){
                inpobj.checked=true;
            }else{
                inpobj.checked=false;
            }
            }
        }
       function delall(){
        let deleteallid=[]
        var inputlist=document.getElementsByClassName('mycheckbox')
            for(var i=0;i<inputlist.length;i++){
                if(inputlist[i].checked==true){
                    // del(inputlist[i].value)
                    deleteallid.push(inputlist[i].value)
                }
            }
            $.ajax({
                        type:'post',
                        url:'/js/roomdeleteall',
                        data:JSON.stringify(deleteallid),
                        success:function(data){
                        }
                    })
       }
    </script>
</body>
</html>